<template>
  <FormItemWrapper v-bind="$attrs" :widget="widget" :designer="designer">
    <a-input
      v-model:value="widgetProps.value"
      :placeholder="widgetProps.placeholder"
      :disabled="widgetProps.disabled"
      :readonly="widgetProps.readonly"
      :allowClear="widgetProps.allowClear"
      :addonBefore="widgetProps.addonBefore"
      :addonAfter="widgetProps.addonAfter"
      :showCount="widgetProps.inputShowCount"
      :maxlength="widgetProps.maxLength"
      :bordered="widgetProps.bordered"
    />
  </FormItemWrapper>
</template>
<script lang="ts" name="input-widget" setup>
  import { ref, computed, onMounted, provide, watch } from "vue"
  import { useAttrs } from "/@/hooks/core/useAttrs"
  import FormItemWrapper from "./FormItemWrapper.vue"
  import type { Designer } from "../../type"
  import { useWidget } from "../useWidget"
  const props = defineProps({
    widget: { type: Object, default: {} },
    designer: { type: Object as () => Designer },
  })
  const widgetProps = props.widget.props
  const attrs = useAttrs()
  const { watchDefaultValue } = useWidget()
  watchDefaultValue(props)

  watch(
    () => widgetProps.maxLength,
    (val) => {
      widgetProps.inputShowCount = widgetProps.maxLength && widgetProps.maxLength > 0
    },
    {
      deep: true,
      immediate: true,
    }
  )
</script>

<style lang="less"></style>
